<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	background-image: url(images/overwater03.jpeg);
	background-size: 100%;
}
#divform {
	width: 400px;
	height: 450px;
	border: 1px solid gray;
	border-radius: 15px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -200px;
	color: #ffffff;
	box-shadow: 0 0 15px 5px #ffffff;
}
#spdiv {
	height: 35px;
	color: red;
	font-size: 12px;
	line-height: 35px;
}
#password2 {
	width: 120px;
}
#infodiv {
	margin-top: 25px;
}
a {
	color:red;
}
#subBtn,#resetBtn {
	width: 85px;
	height: 35px;
	font-size: 16px;
	border: 0 solid #ffffff;
	border-radius: 15px;
}
#subBtn:hover,#resetBtn:hover {
	background-color: #000000;
	color: #ffffff;
}

</style>
</head>
<body>
	<div id="divform">
		<div>
			<h3>注册</h3>
		</div>
		<form action="regist.do" method="post" id="registSub">
			<div>
				账号:<input type="text" name="username" id="uname">
			</div>
			<div id="spdiv">
				<span id="sp1"></span>
			</div>
			<div>
				密码:<input type="password" name="password" id="password1">
			</div>
			<div id="spdiv">
				<span id="sp2"></span>
			</div>
			<div>
				确认密码:<input type="password" id="password2">
			</div>
			<div id="spdiv">
				<span id="sp3"></span>
			</div>
			<div>
				邮箱:<input type="email" name="email" id="uemail">
			</div>
			<div id="spdiv">
				<span id="sp4"></span>
			</div>
			<div>
				手机:<input type="phone" name="phone" id="uphone">
			</div>
			<div id="spdiv">
				<span id="sp5"></span>
			</div>
			<div>
				<input type="button" value="注册" id="subBtn">
				<input type="reset" value="重置" id="resetBtn">
			</div>
			<div id="infodiv">
				<a href="login.jsp">有账号？去登录</a>
			</div>	
		</form>
	</div>
</body>
<script type="text/javascript">
// 验证用户名
function checkUserName() {
	var reg = /^[a-zA-Z0-9]{6,10}$/;
	var name = uname.value;
	if(name == ""){
		sp1.innerHTML = "账号不能为空";
		return false;
	}else  if(!reg.test(name)){
		sp1.innerHTML = "账号是6-10位的字母和数字组合";
		return false;
	}
	sp1.innerHTML = "";
	return true;
}
uname.onblur = checkUserName;
// 验证密码
function checkUserPwd() {
	var reg = /^[0-9]{6,10}$/;
	var pwd = password1.value;
	if(pwd == ""){
		sp2.innerHTML = "密码不能为空";
		return false;
	}else if(!reg.test(pwd)){
		sp2.innerHTML = "密码是6-10位的数字";
		return false;
	}
	sp2.innerHTML = "";
	return true;
}
password1.onblur = checkUserPwd;
// 验证确认密码
function checkPwd() {
	var pwd1 = password1.value;
	var pwd2 = password2.value;
	if(pwd2 == ""){
		sp3.innerHTML = "密码不能为空";
		return false;
	}else if(pwd1 != pwd2){
		sp3.innerHTML = "两次密码不一致";
		return false;
	}
	sp3.innerHTML = "";
	return true;
}
password2.onblur = checkPwd;
// 验证邮箱
function checkUserEmail() {
	var email = uemail.value;
	var reg = /^\w+@\w+\.\w+$/;
	if(email == ""){
		sp4.innerHTML = "邮箱不能为空";
		return false;
	}else if(!reg.test(email)){
		sp4.innerHTML = "邮箱格式不正确";
		return false;
	}
	sp4.innerHTML = "";
	return true;
}
uemail.onblur = checkUserEmail;
// 验证手机号
function checkUserPhone() {
	var phone = uphone.value;
	var reg = /^1[3|5|7|8|9]\d{9}$/;
	if(phone == ""){
		sp5.innerHTML = "手机号不能为空";
		return false;
	}else if(!reg.test(phone)){
		sp5.innerHTML = "手机号格式不正确";
		return false;
	}
	sp5.innerHTML = "";
	return true;
}
uphone.onblur = checkUserPhone;
// 总体验证
function checkAll() {
	var r1 = checkUserName();
	var r2 = checkUserPwd();
	var r3 = checkPwd();
	var r4 = checkUserEmail();
	var r5 = checkUserPhone();
	var r = r1 && r2 && r3 && r4 && r5;
	if(r){
		registSub.submit();
	}
}
subBtn.onclick = checkAll;
</script>
</html>